import { defineComponent, isVue2 } from 'vue-demi'
import { h } from '../../../utils/domutil'
import { getSlot } from '../../../utils/componentutil'
import './radio.css'

export default defineComponent({
  name: 'yc-cron-radio',
  props: {
    value: {
      type: [String, Number, Boolean],
      default: undefined
    },
    modelValue: {
      type: [String, Number, Boolean],
      default: undefined
    },
    label: {
      type: [String, Number, Boolean],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: undefined
    }
  },
  methods: {
    onInput (e) {
      console.log(e.target.value, typeof e.target.value)
      if (isVue2) {
        this.$emit('input', this.label)
      } else {
        this.$emit('update:modelValue', this.label)
      }
    }
  },
  render () {
    const value = isVue2 ? this.value : this.modelValue
    return h(
      'label',
      { class: { 'yc-cron-radio': true, 'is-checked': value === this.label } },
      [
        h(
          'input',
          {
            attrs: { type: 'radio', name: this.name, value: this.label },
            domProps: { checked: value === this.label },
            on: { input: this.onInput }
          }
        ),
        h(
          'span',
          { class: 'yc-cron-radio__item' }
        ),
        h(
          'span',
          { class: 'yc-cron-radio__label' },
          getSlot(this)
        )
      ]
    )
  }
})